<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>响应式幻灯片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css/style.css" rel="stylesheet">
    <script src="js/picturefill.js"></script>
    <script src="js/swipe.js"></script>
  </head>
  <body >
  <header id="header">
    <div class="container"> 
      <h1>世界名犬</h1>
      <h2>世界名犬集合</h2>
    </div>
  </header>
  <div class="container">
    <a href="#nav" class="open toggle-btn"><i class="icon-reorder"></i></a>
    <nav id="nav">
      <ul>
        <li><a href="#">吉娃娃</a></li>
        <li><a href="#">德国牧羊犬</a></li>
        <li><a href="#">中国藏獒</a></li>
        <li><a href="#">哈士奇</a></li>
        <li><a href="#">贵宾犬</a></li>
      </ul>
      <a href="#top" class="close toggle-btn"><i class="icon-remove-sign"></i></a>
    </nav>
    <div id="showcase">
      <div id='slider' class='swipe'>
        <div class='swipe-wrap'>
          <div><img src="img/jww1.jpeg" alt=""></div>
          <div><img src="img/jww2.jpeg" alt=""></div>
          <div><img src="img/jww3.jpeg" alt=""></div>
        </div>
        <div class="slider-control">
          <button class="left" onclick="mySwipe.prev()"><i class="icon-angle-left"></i></button>
          <button class="right" onclick="mySwipe.next()"><i class="icon-angle-right"></i></button>
        </div>
      </div>
      <script>
        window.mySwipe = Swipe(document.getElementById('slider'));
      </script>
    </div>
    <article id="mainbody">
      <h3>吉娃娃介绍</h3>
      <p style="text-align: left;">吉娃娃是目前人们所知道最古老的犬种之一，原产于美洲，和墨西哥的古老文明有深厚而密切的关系。吉娃娃属小型犬种里最小型，优雅、警惕、动作迅速，以匀称的体格和娇小的体型广受人们的喜爱。它们是相当受欢迎的狗狗，功用也相当广泛－它们可以是宗教的守护者，也是平民的好伴侣，上至贵族下至百姓，不分等级不分贵贱，吉娃娃是大家的好朋友。它不喜欢外来的同品种的狗。有和梗类相似的特点。精力充沛。体型较小，适合家养。</p>
    </article>
    <aside id="sidebar">
      <h3>吉娃娃</h3> 
      <p>
        <img src="img/small.jpg" alt="">
      </p></aside>
  </div>
  <footer id="footer">
    <div class="container">
      <h5>&copy; Copyright 狗狗乐园</h5>
    </div>  
  </footer>
  </body>
</html>